<template>
  <div class="admin-container">
    <!-- 功能区：添加按钮 + 搜索框 -->
    <div class="function-area">
      <el-button type="primary" @click="handleAdd" class="add-btn">
        <el-icon><Plus /></el-icon> 添加分类
      </el-button>
      <el-input 
        v-model="searchKeyword" 
        placeholder="请输入分类名称搜索" 
        prefix-icon="Search"
        class="search-input"
        @keyup.enter="handleSearch"
        clearable
      />
    </div>

    <!-- 数据表格：展示分类列表 -->
    <el-table 
      :data="pagedData" 
      border 
      stripe
      class="data-table"
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column prop="name" label="分类名称" width="180" />
      <el-table-column label="分类图片" width="120" align="center">
        <template #default="scope">
          <el-image 
            :src="scope.row.imageUrl" 
            alt="分类图片"
            fit="cover"
            width="60"
            height="60"
            preview-teleported
            :preview-src-list="[scope.row.imageUrl]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="100" align="center" />
      <el-table-column label="操作" width="200" align="center">
        <template #default="scope">
          <el-button 
            type="primary" 
            size="small" 
            @click="handleEdit(scope.row)"
            class="edit-btn"
          >
            <el-icon><Edit /></el-icon> 编辑
          </el-button>
          <el-button 
            type="danger" 
            size="small" 
            @click="handleDelete(scope.row.id)"
            class="delete-btn"
          >
            <el-icon><Delete /></el-icon> 删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件：控制数据分页展示 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50]"
        :total="filteredList.length"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
      />
    </div>

    <!-- 添加/编辑弹窗：统一弹窗处理添加和编辑逻辑 -->
    <el-dialog 
      :title="dialogTitle" 
      v-model="dialogVisible" 
      width="500px"
      :close-on-click-modal="false"
      :before-close="handleDialogClose"
    >
      <el-form 
        :model="formData" 
        :rules="formRules" 
        ref="formRef"
        label-width="100px"
        class="form-container"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input 
            v-model="formData.name" 
            placeholder="请输入分类名称"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        
        <el-form-item label="分类图片" prop="imageUrl">
          <el-upload
            class="upload-demo"
            action="#"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="true"
            accept="image/*"
            :before-upload="beforeUpload"
          >
            <el-button type="primary" size="small">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg/png文件，且不超过2MB
              </div>
            </template>
          </el-upload>
          <el-image 
            v-if="formData.imageUrl" 
            :src="formData.imageUrl" 
            alt="分类图片预览"
            fit="cover"
            width="120"
            height="120"
            class="preview-image"
          />
        </el-form-item>
        
        <el-form-item label="排序" prop="sort">
          <el-input 
            v-model.number="formData.sort" 
            placeholder="请输入排序号"
            type="number"
            min="1"
            max="999"
          />
          <div class="form-tip">排序号越小，分类在列表中显示越靠前</div>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 删除确认弹窗：防止误操作 -->
    <el-dialog 
      title="确认删除" 
      v-model="deleteDialogVisible" 
      width="300px"
      :close-on-click-modal="false"
    >
      <p class="delete-warning">确定要删除该分类吗？此操作不可撤销，删除后相关数据将永久丢失。</p >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">确定删除</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { Plus, Edit, Delete, Search } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 1. 状态管理：模拟数据、分页、搜索、弹窗等状态
const categoryList = ref([]); // 原始分类列表
const searchKeyword = ref(''); // 搜索关键词
const loading = ref(false); // 加载状态
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页条数

// 弹窗相关状态
const dialogVisible = ref(false); // 添加/编辑弹窗显示状态
const deleteDialogVisible = ref(false); // 删除确认弹窗显示状态
const dialogTitle = ref('添加分类'); // 弹窗标题
const currentEditId = ref(null); // 当前编辑的分类ID
const fileList = ref([]); // 图片上传文件列表

// 2. 表单数据与验证规则
const formData = reactive({
  name: '', // 分类名称
  imageUrl: '', // 分类图片URL
  sort: 1 // 排序号
});

// 表单验证规则（确保输入数据合法）
const formRules = reactive({
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { min: 1, max: 50, message: '分类名称长度需在1-50个字符之间', trigger: 'blur' }
  ],
  imageUrl: [
    { required: true, message: '请上传分类图片', trigger: 'change' }
  ],
  sort: [
    { required: true, message: '请输入排序号', trigger: 'blur' },
    { type: 'number', message: '排序号必须为数字', trigger: 'blur' },
    { min: 1, max: 999, message: '排序号需在1-999之间', trigger: 'blur' }
  ]
});

// 表单引用（用于验证和重置）
const formRef = ref(null);

// 3. 计算属性：过滤数据、分页数据（响应式更新）
// 过滤列表：根据搜索关键词筛选分类
const filteredList = computed(() => {
  const keyword = searchKeyword.value.toLowerCase().trim();
  return categoryList.value.filter(item => 
    item.name.toLowerCase().includes(keyword)
  );
});

// 分页列表：根据当前页码和每页条数截取数据
const pagedData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return filteredList.value.slice(startIndex, endIndex);
});

// 4. 生命周期钩子：页面加载时获取数据
onMounted(() => {
  fetchCategoryData(); // 初始化加载分类数据
});

// 5. 核心方法：数据获取、增删改查、上传处理等
// 模拟API请求：获取分类列表数据
const fetchCategoryData = () => {
  loading.value = true;
  // 模拟后端接口延迟（实际项目替换为真实接口请求）
  setTimeout(() => {
    categoryList.value = [
      { id: 165, name: '糖果', imageUrl: 'https://picsum.photos/id/292/200/200', sort: 1 },
      { id: 166, name: '辣条豆干', imageUrl: 'https://picsum.photos/id/431/200/200', sort: 2 },
      { id: 167, name: '零食大礼包', imageUrl: 'https://picsum.photos/id/225/200/200', sort: 3 },
      { id: 168, name: '巧克力', imageUrl: 'https://picsum.photos/id/493/200/200', sort: 4 },
      { id: 169, name: '坚果', imageUrl: 'https://picsum.photos/id/312/200/200', sort: 5 }
    ];
    loading.value = false;
  }, 800);
};

// 搜索功能：触发关键词过滤
const handleSearch = () => {
  currentPage.value = 1; // 搜索后重置到第一页
};

// 分页操作：每页条数变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 切换每页条数后重置到第一页
};

// 分页操作：页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

// 添加分类：打开添加弹窗并重置表单
const handleAdd = () => {
  dialogTitle.value = '添加分类';
  currentEditId.value = null; // 清空编辑ID（标识为添加模式）
  // 重置表单数据
  formData.name = '';
  formData.imageUrl = '';
  formData.sort = 1;
  fileList.value = [];
  // 重置表单验证状态
  if (formRef.value) {
    formRef.value.resetFields();
  }
  dialogVisible.value = true; // 显示弹窗
};

// 编辑分类：打开编辑弹窗并填充数据
const handleEdit = (row) => {
  dialogTitle.value = '编辑分类';
  currentEditId.value = row.id; // 记录当前编辑的分类ID
  // 填充表单数据（深拷贝避免直接修改原数据）
  formData.name = row.name;
  formData.imageUrl = row.imageUrl;
  formData.sort = row.sort;
  // 填充上传文件列表（用于编辑时显示已上传图片）
  fileList.value = row.imageUrl ? [{ url: row.imageUrl, name: '分类图片' }] : [];
  dialogVisible.value = true; // 显示弹窗
};

// 关闭弹窗：重置表单状态（防止下次打开有残留数据）
const handleDialogClose = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  fileList.value = [];
};

// 提交表单：添加或编辑分类
const handleSubmit = () => {
  // 表单验证
  formRef.value.validate((valid) => {
    if (valid) {
      if (currentEditId.value) {
        // 编辑模式：更新现有分类
        const editIndex = categoryList.value.findIndex(item => item.id === currentEditId.value);
        if (editIndex !== -1) {
          categoryList.value[editIndex] = { ...categoryList.value[editIndex], ...formData };
          ElMessage.success('分类更新成功！');
        }
      } else {
        // 添加模式：创建新分类
        const newId = categoryList.value.length > 0 
          ? Math.max(...categoryList.value.map(item => item.id)) + 1 
          : 1; // 生成不重复的新ID
        const newCategory = {
          id: newId,
          name: formData.name,
          imageUrl: formData.imageUrl,
          sort: formData.sort
        };
        categoryList.value.push(newCategory); // 添加到列表
        ElMessage.success('分类添加成功！');
      }
      dialogVisible.value = false; // 关闭弹窗
    }
  });
};

// 处理删除：显示确认弹窗
const handleDelete = (id) => {
  currentEditId.value = id; // 记录要删除的分类ID
  deleteDialogVisible.value = true; // 显示删除确认弹窗
};

// 确认删除：执行删除操作
const confirmDelete = () => {
  const deleteIndex = categoryList.value.findIndex(item => item.id === currentEditId.value);
  if (deleteIndex !== -1) {
    categoryList.value.splice(deleteIndex, 1); // 从列表中删除
    ElMessage.success('分类删除成功！');
  }
  deleteDialogVisible.value = false; // 关闭弹窗
  currentPage.value = 1; // 重置到第一页（避免删除后页码超出范围）
};

// 图片上传：成功回调
const handleUploadSuccess = (response, file) => {
  // 实际项目中应使用后端返回的图片URL，此处用本地临时URL预览
  formData.imageUrl = URL.createObjectURL(file.raw);
  ElMessage.success('图片上传成功！');
};

// 图片上传：失败回调
const handleUploadError = () => {
  ElMessage.error('图片上传失败，请重试！');
};

// 图片上传：移除已上传图片
const handleRemove = () => {
  formData.imageUrl = '';
  fileList.value = [];
};

// 图片上传：上传前校验（格式、大小）
const beforeUpload = (file) => {
  const isImage = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLess2MB = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('请上传JPG或PNG格式的图片！');
    return false;
  }
  if (!isLess2MB) {
    ElMessage.error('图片大小不能超过2MB！');
    return false;
  }
  return true;
};
</script>

<style scoped>
/* 全局容器样式 */
.admin-container { 
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}

/* 功能区样式 */
.function-area { 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  margin-bottom: 20px;
}

.add-btn { 
  background-color: #409eff;
}

.search-input { 
  width: 320px; 
}

/* 表格样式 */
.data-table { 
  background: #fff; 
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.edit-btn { 
  margin-right: 8px; 
  background-color: #409eff;
}

.delete-btn { 
  background-color: #f56c6c;
}

/* 分页样式 */
.pagination { 
  text-align: right; 
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

/* 表单与弹窗样式 */
.form-container { 
  margin-top: 10px;
}

.preview-image { 
  margin-top: 12px; 
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.form-tip { 
  color: #606266; 
  font-size: 12px; 
  margin-top: 6px; 
}

.dialog-footer { 
  display: flex; 
  justify-content: flex-end; 
  gap: 10px; 
  margin-top: 20px;
}

/* 删除弹窗样式 */
.delete-warning { 
  color: #f56c6c;
  line-height: 1.5;
  margin: 10px 0;
}
</style>